<template>
  <div class="home">
    <div class="search-div">
      <el-form :inline="true" ref="form" :model="dishInfo" label-width="80px">
        <el-form-item label="菜品名称">
          <el-input
            placeholder="请输入菜品名称"
            v-model="dishInfo.dishName"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜品价格">
          <el-input
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            placeholder="请输入菜品价格"
            v-model="dishInfo.price"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜品分类">
          <el-select
            v-model="dishInfo.category.id"
            placeholder="请选择菜品分类"
          >
            <!-- label是菜品分类名称， value是菜品分类id -->
            <el-option
              v-for="category in categoryList"
              :key="category.id"
              :label="category.dishesCategoryName"
              :value="category.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="block">
            <span class="demonstration">开始时间</span>
            <el-date-picker
              v-model="dishInfo.startTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="block">
            <span class="demonstration">结束时间</span>
            <el-date-picker
              v-model="dishInfo.endTime"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryDish()">搜索</el-button>
          <el-button type="danger" @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="dish-table">
      <el-table :data="dishList" style="width: 100%">
        <el-table-column label="编号" width="70" align="center">
          <template slot-scope="scope">
            {{ (currentPage - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="dishName"
          align="center"
          label="菜品名称"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="price" align="center" label="菜品价格">
        </el-table-column>
        <el-table-column prop="buyCount" align="center" label="菜品销量">
        </el-table-column>
        <el-table-column label="菜品图片" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.picPath" width="50px" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="category.dishesCategoryName"
          label="菜品分类"
        >
        </el-table-column>
        <el-table-column prop="created" label="开始时间" align="center">
        </el-table-column>
        <el-table-column prop="updated" label="结束时间" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- 路由标签 :to 取到哪个页面
              /edit/1
             -->
            <router-link :to="{ name: 'edit', params: { id: scope.row.id } }">
              <el-button  size="mini" type="primary">修改</el-button>
            </router-link>

            <el-button
              size="mini"
              type="danger"
              @click="deleteDish(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="dishesTotal"
          :page-size="limit"
          :current-page="currentPage"
          @current-change="queryDish"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dishInfo: {
        dishName: null,
        price: null,
        category: {
          id: null,
        },
        startTime: null,
        endTime: null,
      },
      categoryList: [],
      dishList: [],
      currentPage: 1,
      limit: 5,
      dishesTotal: 0,
    };
  },
  created() {
    this.findCategoryAll();
    this.queryDish();
  },
  methods: {
    // 查询所有菜品分类信息
    findCategoryAll() {
      this.$http
        .post("http://localhost:8080/category/all")
        .then((res) => {
          this.categoryList = res.data.data.categorys;
        })
        .catch((err) => {
          this.$message.error("连接超时，请检查网络");
        });
    },
    // 多条件分页查询 默认假设currentPage 没有值 给个默认值 1
    queryDish(currentPage = 1) {
      this.currentPage = currentPage;
      this.$http
        .post(
          "http://localhost:8080/dish/queryDish/" +
            this.currentPage +
            "/" +
            this.limit,
          this.dishInfo
        )
        .then((res) => {
            console.log(res);
          this.dishesTotal = res.data.data.dishList.dishesTotal;
          this.dishList = res.data.data.dishList.dishes;
        })
        .catch((err) => {
          this.$message.error("连接超时，请检查网络");
        });
    },
    // 清空
    clear() {
      this.dishInfo = {
        dishName: null,
        price: null,
        category: {
          id: null,
        },
        startTime: null,
        endTime: null,
      };
    },

    deleteDish(id) {
      this.$confirm("是否删除该菜品信息?", "菜品删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "danger",
      })
        .then(() => {
          this.$http
            .post("http://localhost:8080/dish/deleteDish/" + id)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "保存菜品成功!",
                });
              } else {
                this.$message({
                  type: "danger",
                  message: res.data.message,
                });
              }
              this.queryDish();
            })
            .catch((err) => {
              this.$message({
                type: "danger",
                message: "连接超时",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped>
.page {
  text-align: center;
  margin-top: 30px;
}
</style>